<template>
    <div>
        <Banner
            :tabList="tabList"
            :bannerImg="bannerImg"
            :mainTitle="mainTitle"
        />
        <div class="introduce section" id="introduce">
            <div class="container mx-auto maxWidth1400 w-[84vw]">
                <div class="sectionTitle">
                    {{ state.introduceData[0]?.title }}
                </div>
                <div class="flex justify-between mt-[42px]">
                    <div class="left pr-[94px]">
                        <p
                            class="text-[14px] text-justify leading-[30px] mb-[30px] font-light"
                            v-html="state.introduceData[0]?.titleDesc"
                        ></p>
                    </div>
                    <div class="right w-[670px] cursor-pointer">
                        <CustomImage
                            :srcUrl="state.introduceData[0]?.attribute1"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="advantage section" id="advantage">
            <div class="container mx-auto maxWidth1400 w-[84vw]">
                <div class="sectionTitle center">{{ $t("common.text4") }}</div>
                <div class="flex justify-between mt-[42px]">
                    <div
                        class="item bg-white relateive px-[50px] py-[60px] cursor-pointer delay__0_2s"
                        :class="[`animate__delay-${(index + 1) * 1}s`]"
                        v-aos.once="['animate__fadeInLeft']"
                        v-for="(itemAdvantage, index) in state.advantageData"
                        :key="itemAdvantage.id"
                    >
                        <div class="img-box">
                            <img
                                class="img white"
                                :src="itemAdvantage.attribute3"
                            />
                            <!-- <CustomImage class="img white" :srcUrl="itemAdvantage.attribute3" /> -->
                        </div>
                        <div class="item-title mt-[18px]">
                            {{ itemAdvantage.title }}
                        </div>
                        <div class="item-line"></div>
                        <div class="desc">
                            {{ itemAdvantage.titleDesc }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="honor section" id="honor">
            <div class="container maxWidth1400 mx-auto">
                <div
                    class="sectionTitle center animate__animated"
                    v-aos.once="['animate__fadeInUp']"
                >
                    {{ $t("common.text5") }}
                </div>
                <div class="swiperWrap animate__animated" v-aos.once="['animate__fadeInUp']">
                    <swiper :direction="`horizontal`" :modules="[Navigation, Autoplay]" :navigation="{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }" :slidesPerView="5" :slidesPreGroup="1" :speed="2000" :autoplay="{ delay: 3000 }" :observer="true"
                        :observeParents="true" @swiper="onHonorSwiperRef" :slideToClickedSlide="true" :centeredSlides="true"
                        @slideChange="onHonorSlideChange" class="honorSwiper" ref="honorSwiperRef">
                        <swiper-slide class="shrink-0" v-for="(itemHonor, index) in state.honorData"
                            :class="{ active: honorCurrentIndex === index }" :key="itemHonor.id">
                            <div class="title">{{ itemHonor.title }}</div>
                            <div class="round"></div>
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-button-prev">
                        <el-icon :size="26">
                            <ArrowLeft />
                        </el-icon>
                    </div>
                    <div class="swiper-button-next">
                        <el-icon :size="26">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
                <div
                    class="honorContent max-w-[1400px] mx-auto animate__animated"
                    v-aos.once="['animate__fadeInUp']"
                    v-html="state.honorData[honorCurrentIndex]?.context"
                ></div>
            </div>
        </div>
        <div class="history section" id="history">
            <div class="container maxWidth1400 mx-auto">
                <div
                    class="sectionTitle center animate__animated"
                    v-aos.once="['animate__fadeInUp']"
                >
                    {{ $t("common.text6") }}
                </div>
                <div
                    class="desc animate__animated"
                    v-aos.once="['animate__fadeInUp']"
                >
                    {{ $t("about.text1") }}
                </div>
                <div class="swiperWrap animate__animated" v-aos.once="['animate__fadeInUp']">
                    <swiper :direction="`horizontal`" :modules="[Navigation, Autoplay]" :autoplay="{ delay: 3000 }"
                        :observer="true" 
                        :observeParents="true" 
                        :navigation="{
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        }" 
                        :slidesPerView="5" 
                        :slidesPreGroup="1"
                        @swiper="onHistorySwiperRef" 
                        class="historySwiper"
                        ref="hisotrySwiperRef">
                        <swiper-slide class="shrink-0" v-for="itemHistory in state.historyData" :key="itemHistory.id">
                            <div class="itemWrap">
                                <div class="title">
                                    {{ itemHistory.title }}
                                    <div class="dot"></div>
                                </div>
                                <div class="text" v-html="itemHistory.titleDesc">
                                </div>
                            </div>
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-button-prev">
                        <el-icon :size="26">
                            <ArrowLeft />
                        </el-icon>
                    </div>
                    <div class="swiper-button-next">
                        <el-icon :size="26">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="global section" id="global">
            <div class="container mx-auto overflow-hidden">
                <div
                    class="sectionTitle center animate__animated"
                    v-aos.once="['animate__fadeInUp']"
                >
                    {{ $t("common.text7") }}
                </div>
                <swiper
                    :modules="[Pagination, Autoplay]"
                    :direction="`horizontal`"
                    :slidesPerView="2"
                    :slidesPerGroup="1"
                    :spaceBetween="48"
                    :loop="true"
                    :autoplay="true"
                    :pagination="{ el: '#global-pagination', clickable: true }"
                    @swiper="onGlobalSwiperRef"
                    class="globalSwiper mx-auto max-w-[1400px] overflow-hidden mt-[300px] animate__animated"
                    v-aos.once="['animate__fadeInUp']"
                    ref="globalSwiperRef"
                >
                    <swiper-slide
                        class="cursor-pointer flex items-center justify-between"
                        v-for="itemGlobal in state.globalData"
                        :key="itemGlobal.id"
                    >
                        <div class="left">
                            <!-- <img src="/assets/image/global-item1.png" /> -->
                            <CustomImage :srcUrl="itemGlobal.attribute1" />
                        </div>
                        <div class="right">
                            <div class="title">
                                {{ itemGlobal.title }}
                            </div>
                            <div class="desc">
                                {{ itemGlobal.titleDesc }}
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
                <div class="swiper-pagination" id="global-pagination"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { ARTICLE_TYPE_MAP } from "~/utils/const";
import bannerImg from "/assets/image/about_banner.jpg";
const { t, locale } = useI18n();
const $route = useRoute();
const honorCurrentIndex = ref(0);
const globalSwiperRef = ref(null);
const honorSwiperRef = ref(null);
const historySwiperRef = ref(null);
const state = reactive({
    introduceData: [],
    advantageData: [],
    honorData: [],
    historyData: [],
    globalData: [],
});
const tabList = reactive([
    {
        title: () => t("common.text3"),
        key: "introduce",
        path: `/about`,
    },
    {
        title: () => t("common.text4"),
        key: "advantage",
        path: `/about`,
    },
    {
        title: () => t("common.text5"),
        key: "honor",
        path: `/about`,
    },
    {
        title: () => t("common.text6"),
        key: "history",
        path: `/about`,
    },
    {
        title: () => t("common.text7"),
        key: "global",
        path: `/about`,
    },
]);

const mainTitle = computed(() => t("common.text2"));

const onHonorSwiperRef = (swiper) => {
    honorSwiperRef.value = swiper;
};
const onHistorySwiperRef = (swiper) => {
    historySwiperRef.value = swiper;
};
const onGlobalSwiperRef = (swiper) => {
    globalSwiperRef.value = swiper;
};
const onHonorSlideChange = (e) => {
    honorCurrentIndex.value = e.activeIndex;
};

// 首次加载获取文章列表
const getArticleList = async (type, flag) => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            type,
            page: 1,
            limit: 99,
        },
    });
    state[`${flag}Data`] = res?.rows.length ? [...res.rows] : [];
};

// 页面初始化加载数据
const initData = () => {
    getArticleList(ARTICLE_TYPE_MAP["introduce"], "introduce");
    getArticleList(ARTICLE_TYPE_MAP["advantage"], "advantage");
    getArticleList(ARTICLE_TYPE_MAP["honor"], "honor");
    getArticleList(ARTICLE_TYPE_MAP["history"], "history");
    getArticleList(ARTICLE_TYPE_MAP["global"], "global");
};
onMounted(() => {
    initData();
});
watch(
    () => $route.query.key,
    (newVal) => {
        const Secitons = document.querySelectorAll(".section");
        const target = Array.from(Secitons).find((item) => item.id === newVal);
        if (target) {
            window.scrollTo({
                top: target.offsetTop - 100,
                behavior: "smooth",
            });
        }
    }
);
// 监听语言变化，重新获取文章数据
watch(
    () => locale.value,
    (val) => {
        initData();
    }
);
</script>

<style scoped>
.sectionTitle {
    font-size: 36px;
    color: #0058ce;
    margin-bottom: 20px;
}

.sectionTitle::after {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    background: #ffc600;
    margin-top: 10px;
}

.sectionTitle.center {
    text-align: center;
}

.sectionTitle.center::after {
    margin: 0 auto;
    margin-top: 10px;
}

.introduce {
    width: 100%;
    background: url("/assets/image/abo1sd.png") no-repeat left bottom;
    padding: 80px 0;

    .container {
        .left {
            width: calc(100% - 670px);
            color: #333;
        }

        .right {
            overflow: hidden;

            img {
                width: 100%;
                object-fit: cover;
                transition: all 0.6s ease-in-out;
            }

            &:hover {
                img {
                    transform: scale(1.05);
                }
            }
        }
    }
}

.advantage {
    width: 100%;
    background: url("/assets/image/abo2Bg.jpg") no-repeat center center / cover;
    padding: 120px 0;

    .sectionTitle {
        color: #fff;
    }

    .item {
        width: calc(25% - 20px);
        margin: 20px 0 0 20px;
        padding: 64px 48px 80px;
        color: #fff;
        transition: all 0.6s ease;
        border-radius: 10px;
        border: 1px solid #0058ce;
        background-color: rgba(0, 88, 206, 0.42);
        text-align: center;

        .img-box {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #0058ce;
            transition: all 0.4s ease;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;

            &::v-deep(img) {
                max-width: 40px;
                height: auto;
                max-height: 46px;
            }
        }

        .title {
            margin-top: 24px;
            font-size: 18px;

            p {
                text-transform: uppercase;
                opacity: 0.53;
                min-height: 42px;
                color: #fff;
                margin-top: 4px;
                font-size: 14px;
                letter-spacing: 1.2px;
            }
        }

        .item-line {
            width: 45px;
            height: 1px;
            background-color: var(--color-primary);
            margin-left: auto;
            margin-right: auto;
            transition: all 0.4s ease;
            margin-top: 18px;
        }

        .desc {
            margin-top: 24px;
            line-height: 24px;
            font-size: 14px;
            overflow: hidden;
            text-align: center;
            letter-spacing: 1.2px;
        }

        &:hover {
            background-color: rgba(0, 88, 206, 1);

            .img-box {
                background-color: var(--color-primary);
                border-color: var(--color-primary);
                transform: translateY(-10px);
            }

            .item-line {
                width: 60px;
            }
        }
    }
}

.honor {
    overflow: hidden;
    padding: 80px 0;

    .honorContent {
        margin-top: 50px;

        ::v-deep(p) {
            font-size: 14px;
            text-align: center;

            br {
                content: "";
                display: block;
                height: 20px;
            }
        }
    }

    .swiperWrap {
        margin-top: 68px;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            width: 200vw;
            left: -50vw;
            height: 1px;
            bottom: 28px;
            background: #dedee1;
        }

        .swiper-button-prev,
        .swiper-button-next {
            position: absolute;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #ffcb16;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            position: absolute;

            transition: all 0.4s ease;
            z-index: 4;

            &:hover {
                background-color: #0058ce;
            }
        }

        .swiper-button-next {
            right: -100px;
            bottom: 0px;
        }

        .swiper-button-prev {
            left: -100px;
            bottom: 0px;
        }
    }

    .honorSwiper {
        overflow: hidden;

        ::v-deep(.swiper-wrapper) {
            display: flex;
            position: relative;
            z-index: 5;

            .swiper-slide {
                cursor: pointer;
                padding: 20px 0 6px;

                .title {
                    width: 120px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 30px;
                    color: #999;
                    font-family: "宋体", "SimSun", "\5B8B\4F53";
                    font-style: italic;
                    line-height: 1.1;
                    position: relative;
                    transition: color 0.4s ease, background 0.4s ease,
                        transform 0.4s ease;
                    margin: 0 auto;

                    &::after {
                        content: "";
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        border-top: 8px solid #0058ce;
                        position: absolute;
                        width: 0;
                        height: 0;
                        bottom: -7px;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        opacity: 0;
                        transition: all 0.4s ease 0.2s;
                    }
                }

                .round {
                    width: 45px;
                    height: 45px;
                    position: relative;
                    margin: 0 auto;
                    border: 1px solid transparent;
                    border-radius: 50%;

                    &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        background: #b2b2a8;
                        top: 50%;
                        left: 50%;
                        margin: -8px 0 0 -8px;
                        border-radius: 50%;
                        z-index: 5;
                    }
                }

                &.active {
                    .title {
                        color: #fff;
                        background: #0058ce;
                        font-size: 44px;
                        transform: translateY(-20px);
                        padding-right: 8px;

                        &::after {
                            opacity: 1;
                        }
                    }

                    .round {
                        border-color: #0058ce;

                        &::after {
                            background-color: #0058ce;
                        }
                    }
                }
            }
        }
    }
}

.history {
    width: 100%;
    background: url("/assets/image/abo4Bg.jpg") no-repeat center center / cover;
    overflow: hidden;
    padding: 80px 0 68px;

    .sectionTitle {
        color: #fff;
    }

    .desc {
        font-size: 14px;
        color: #fff;
        text-align: center;
        max-width: 1140px;
        margin: 0 auto;
        line-height: 30px;
        margin-top: 36px;
    }

    .honorContent {
        margin-top: 50px;

        ::v-deep(p) {
            font-size: 14px;
            text-align: center;

            br {
                content: "";
                display: block;
                height: 20px;
            }
        }
    }

    .swiperWrap {
        margin-top: 82px;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            width: 200vw;
            left: -50vw;
            height: 1px;
            top: 234px;
            background: #fff;
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #ffcb16;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            position: absolute;
            top: 206px;
            transition: all 0.4s ease;
            z-index: 4;

            &:hover {
                background-color: #0058ce;
            }
        }

        .swiper-button-next {
            right: -100px;
            bottom: 0px;
        }

        .swiper-button-prev {
            left: -100px;
            bottom: 0px;
        }
    }

    .historySwiper {
        overflow: hidden;

        ::v-deep(.swiper-wrapper) {
            display: flex;
            justify-content: center;
            position: relative;
            z-index: 5;

            .swiper-slide {
                cursor: pointer;
                padding: 20px 0 6px;

                .itemWrap {
                    width: 100%;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    color: #fff;
                    margin-top: 130px;

                    .title {
                        font-size: 42px;
                        font-family: "宋体", "SimSun", "\5B8B\4F53";
                        font-style: italic;
                        line-height: 1;
                        position: relative;
                        display: flex;
                        height: 170px;
                        color: #fff;
                        transition: color 0.4s ease;

                        .dot {
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            background: #fff;
                            position: absolute;
                            top: calc(50% - 8px);
                            left: 35px;
                            transition: all 0.4s ease;

                            &::before {
                                content: "";
                                display: block;
                                width: 26px;
                                height: 26px;
                                border-radius: 50%;
                                border: 1px solid #fff;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                margin: -13px 0 0 -13px;
                                background: #092b59;
                                z-index: -1;
                            }

                            &::after {
                                content: "";
                                display: block;
                                width: 1px;
                                height: 28px;
                                bottom: 20px;
                                background: #fff;
                                position: absolute;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                        }
                    }

                    .text {
                        width: 100%;
                        height: 120px;
                        margin-bottom: 10px;
                        padding-right: 2px;
                        letter-spacing: 2px;
                        line-height: 30px;
                        font-size: 14px;

                        p {
                            position: relative;
                            padding-left: 8px;

                            &::before {
                                content: "";
                                position: absolute;
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                                left: 0;
                                background: #fff;
                                top: 13px;
                            }
                        }
                    }
                }

                &:nth-child(2n) {
                    .itemWrap {
                        .title {
                            align-items: flex-end;

                            .dot {
                                &::after {
                                    bottom: auto;
                                    top: 20px;
                                }
                            }
                        }

                        .text {
                            margin-top: 10px;
                        }
                    }
                }

                &:nth-child(2n + 1) {
                    .itemWrap {
                        flex-direction: column-reverse;
                        margin-top: 0;
                    }
                }

                &:hover {
                    .itemWrap {
                        .title {
                            color: var(--color-primary);

                            .dot {
                                background-color: var(--color-primary);

                                &::after {
                                    background-color: var(--color-primary);
                                }

                                &::before {
                                    border-color: var(--color-primary);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

html[data-lang="en"] .history .historySwiper .swiper-wrapper .swiper-slide .itemWrap .text {
    height: 180px;
    letter-spacing: 1px;
    text-align: justify;
    font-size: 13px;
}

html[data-lang="en"] .history .swiperWrap::after {
    top: 296px;
}

html[data-lang="en"] .history .historySwiper .swiper-wrapper .swiper-slide .itemWrap {
    margin-top: 190px;
}

html[data-lang="en"] .history .historySwiper .swiper-wrapper .swiper-slide:nth-child(2n + 1) .itemWrap {
    margin-top: 0;
}

html[data-lang="en"] .history .swiperWrap .swiper-button-prev,
html[data-lang="en"] .history .swiperWrap .swiper-button-next {
    top: 266px;
}

.global {
    width: 100%;
    background: url("/assets/image/abo5Bg.png") no-repeat center top 76px;
    padding: 80px 0 68px;

    .globalSwiper {
        width: 100%;
        overflow: hidden;

        ::v-deep(.swiper-wrapper) {
            display: flex;
        }

        ::v-deep(.swiper-slide) {
            flex-shrink: 0;
            width: 50%;
            background: rgba(255, 255, 255, 0.75);
            padding: 30px 38px;
            border: 1px solid #b3b3b3;
            transition: all 0.4s ease;

            .left {
                width: 140px;
                height: 140px;
                border-radius: 50%;
                overflow: hidden;
                flex-shrink: 0;

                img {
                    width: 140px;
                    height: 140px;
                    /* object-fit: cover; */
                }
            }

            .right {
                padding-left: 33px;

                .title {
                    font-size: 20px;
                    color: #000;
                    letter-spacing: 0;
                }

                .desc {
                    margin-top: 10px;
                    line-height: 30px;
                    font-weight: 300;
                    font-size: 14px;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
            }

            &:hover {
                border-color: var(--color-primary);
            }
        }
    }

    #global-pagination {
        margin-top: 64px;
        text-align: center;

        ::v-deep(.swiper-pagination-bullet) {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin: 0 4px;
            background-color: #e3e0e0;
            border-radius: 50%;
            cursor: pointer;
        }

        ::v-deep(.swiper-pagination-bullet-active) {
            background-color: #ffc600;
        }
    }
}</style>
